<template>
  <BaseMainSlot :show-tab="true">
    <!-- 加工批次查询 -->
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="seach-box">
          <div class="select-box-content">
            <div class="select-box-content-name">批次名称：</div>
            <el-input
              v-model="querylist.processBatchName"
              placeholder="请输入批次名称"
              clearable
            />
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">批次号：</div>
            <el-input
              v-model="querylist.processBatchNo"
              placeholder="请输入批次号"
              clearable
            />
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工产品：</div>
            <el-select
              v-model="querylist.productMaterialNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工产线：</div>
            <el-select
              v-model="querylist.productionLineNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in productionLineOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工时间：</div>
            <el-date-picker
              v-model="querylist.startTime"
              :picker-options="beginDate()"
              type="date"
              value-format="yyyy-MM-dd 00:00:00"
              placeholder="开始时间"
            />
            <el-date-picker
              v-model="querylist.endTime"
              :picker-options="processDate()"
              type="date"
              value-format="yyyy-MM-dd 23:59:59"
              placeholder="结束时间"
            />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:tab-select>
      <SelectButton
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="batchstaumet"
      />
    </template>
    <template v-slot:table-box>
      <tdtable
        :page="page"
        :title="title"
        :prop-list="propList"
        :table-data="tableData"
        :show-index-column="showIndexColumn"
        :show-select-column="showSelectColumn"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:processTime="{row}">
          <span v-if="row.processBatchNo">{{ row.startTime }}--{{ row.endTime }}</span>
        </template>
        <template v-slot:output="{row}">
          <span
            v-if="row.estimatedProcessingQuantity"
          >{{ row.output }}{{ row.outputUnitName }}</span>
        </template>
        <template v-slot:estimatedProcessingQuantity="{row}">
          <span
            v-if="row.estimatedProcessingQuantity"
          >{{ row.estimatedProcessingQuantity }}{{ row.estimatedProcessingUnitName }}</span>
        </template>
        <template v-slot:rawMaterialQuantity="{row}">
          <span
            v-if="row.rawMaterialQuantity"
          >{{ row.rawMaterialQuantity }}{{ row.rawMaterialUnitName }}</span>
        </template>
        <template v-slot:jobTask="{row}">
          <div
            v-if="row.processBatchNo"
            class="pointer"
            @click="showJobDialog(row)"
          >
            <i class="el-icon-view"></i>查看
          </div>
        </template>
        <template v-slot:handler="{row}">
          <!-- <el-button
            v-if="row.processBatchNo"
            type="success"
            size="small"
            @click="showBatchDialog(row)"
          >完成批次</el-button>-->
          <div
            v-if="row.processBatchNo"
            class="pointer"
            @click="showBatchDialog(row)"
          >
            <i class="el-icon-edit"></i>完成批次
          </div>
        </template>
      </tdtable>
    </template>
    <template v-slot:dialog>
      <completeBatchDialog
        :unit-list="UnitOptions"
        :show="BatchDialog"
        :complete-batch="completeBatch"
        @closeDialog="closeBatchDialog"
        @addEvent="addEvent"
      />
      <AssociatedJobDialog
        :process-task-data="processTaskData"
        :show="isShowJobDialog"
        @closeDialog="closeJobDialog"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import AssociatedJobDialog from "../components/associated-job-dialog.vue";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import SearchBox from "@/components/SearchBox";
import SelectButton from "@/components/selectbutton/index.vue";
import tdtable from "@/components/table/index.vue";
import completeBatchDialog from "../components/complete-batch-dialog.vue";
import ProcessBatchApi from "@/api/processing-management/process-batch-manage/process-batch-creation/index";
import productionApi from "@/api/processing-management/basic-info-manage/processing-product-manage/index";
import productionLineApi from "@/api/processing-management/basic-info-manage/production-line-manage/index";
// import processTaskApi from "@/api/process-management/processing-task";
import UnitApi from "@/api/processing-management/basic-info-manage/data-item-manage/index";
// import { mymixin } from "@/utils/mixin";
export default {
  name: "ProcessBatchQuery",
  components: {
    BaseMainSlot,
    SelectButton,
    SearchBox,
    tdtable,
    completeBatchDialog,
    AssociatedJobDialog
  },
  // mixins: [mymixin],
  data() {
    return {
      UnitOptions: [],
      completeBatch: {},
      status: false,
      isShowJobDialog: false,
      processTaskData: [],
      querylist: {
        processBatchName: "",
        processBatchNo: "",
        productMaterialNo: "",
        productionLineNo: "",
        startTime: ""
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      options: [],
      productionLineOptions: [],
      buttonselectlist: [{ name: "未完成批次" }, { name: "已完成批次" }],
      title: "加工批次查询列表",
      propList: [
        { prop: "processBatchName", label: "批次名称", minWidth: "100" },
        { prop: "processBatchNo", label: "批次号", minWidth: "110" },
        { prop: "productMaterialName", label: "加工产品", minWidth: "100" },
        {
          prop: "estimatedProcessingQuantity",
          label: "估算加工量",
          minWidth: "100",
          slotName: "estimatedProcessingQuantity"
        },
        {
          prop: "output",
          label: "实际加工量",
          minWidth: "100",
          slotName: "output"
        },
        { prop: "rawMaterialName", label: "原料名称", minWidth: "100" },
        {
          prop: "rawMaterialQuantity",
          label: "原料数量",
          minWidth: "100",
          slotName: "rawMaterialQuantity"
        },
        { prop: "productionLineName", label: "加工产线", minWidth: "100" },
        {
          prop: "startTime",
          label: "加工时间(开始-结束)",
          minWidth: "260",
          slotName: "processTime"
        },
        {
          prop: "processingTaskList",
          label: "关联作业任务",
          minWidth: "100",
          slotName: "jobTask"
        },
        {
          prop: "completeEndTime",
          label: "实际完成时间",
          minWidth: "130",
          show: true
        },
        { label: "操作", minWidth: "120", slotName: "handler", show: false }
      ],
      tableData: [],
      // 显示序号
      showIndexColumn: true,
      // 显示select
      showSelectColumn: false,
      handleSelectList: [],
      BatchDialog: false
      // nowbatchstau:false
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getOptions();
    this.getProductionLineOptions();
    this.getUnitOptions();
    // this.queryPageList();
  },
  methods: {
    // 限制前面日期不能低于后面日期
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.querylist.endTime) {
            //  如果结束时间不为空，则小于结束时间
            return new Date(self.querylist.endTime).getTime() < time.getTime();
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.querylist.startTime) {
            //  如果开始时间不为空，则结束时间大于开始时间
            self.time = new Date();
            return (
              new Date(self.querylist.startTime).getTime() > time.getTime()
            );
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    // 获取单位选择项
    getUnitOptions() {
      UnitApi.queryUnit().then(res => {
        if (res.code === 1) {
          this.UnitOptions = res.data;
        }
      });
    },
    search() {
      this.queryPageList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryPageList();
    },

    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryPageList();
    },
    // 获取关联产品
    getOptions() {
      productionApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          // 提供表头搜索数据
          res.data.forEach(item => {
            list.push({
              name: item.material.materialName,
              value: item.material.materialNo
            });
          });
          this.options = list;
        }
      });
    },
    getProductionLineOptions() {
      productionLineApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          // 提供表头搜索数据
          res.data.forEach(item => {
            list.push({
              name: item.productionLineName,
              value: item.productionLineNo
            });
          });
          this.productionLineOptions = list;
        }
      });
    },
    // 选中table行点击事件
    handleSelectionChange(val) {
      console.log(val);
      // this.handleSelectList = []
      // val.forEach(e => {
      //     this.handleSelectList.push(e.)
      // });
    },
    // 生产批次查询
    batchstaumet(i) {
      console.log(i);
      if (i) {
        this.status = true;
        this.$set(this.propList[4], "show", false);
        this.$set(this.propList[10], "show", false);
        this.$set(this.propList[11], "show", true);
      } else {
        this.status = false;
        this.$set(this.propList[4], "show", true);
        this.$set(this.propList[10], "show", true);
        this.$set(this.propList[11], "show", false);
      }
      this.tableData = [];
      this.search();
    },
    queryPageList() {
      // 获取数据
      let param = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        entity: {
          ...this.querylist,
          status: this.status,
          processBatchType: "自主生产"
        }
      };
      ProcessBatchApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.page.total = data.totalElements;
          this.tableData = data.content;
        }
      });
    },
    handleClickcomplite(row) {
      // console.log(row)
      // let parms = {
      //     processBatchNo:row.processBatchNo,
      //     status: true,
      //     completeEndTime:
      // }
      // ProcessBatchApi.edit(parms).then((res)=>{
      //     if(res.code == 1){
      //         this.$message.success(res.msg)
      //         this.queryPageList()
      //     }
      // })
    },
    showJobDialog(row) {
      this.isShowJobDialog = true;
      this.processTaskData = row.processingTaskList;
    },
    closeJobDialog() {
      this.isShowJobDialog = false;
    },
    showBatchDialog(row) {
      this.completeBatch = { ...row };
      this.BatchDialog = true;
    },
    addEvent(e) {
      console.log(e);
      let a = {};
      if (!this.completeBatch.startTime) {
        a = {
          startTime: e.completeStartTime,
          endTime: e.completeEndTime
        };
      }
      let params = { ...this.completeBatch, ...e, ...a, status: true };
      ProcessBatchApi.edit(params).then(res => {
        console.log(res);
        if (res.code === 1) {
          this.$message.success(res.msg);
          this.queryPageList();
        }
      });
      this.closeBatchDialog();
    },
    closeBatchDialog() {
      this.BatchDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

::v-deep .el-collapse-item__header {
  height: 0px;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 0px;
  bottom: -18px;
}

::v-deep .el-form-item__label {
  min-width: 120px !important;
  text-align: end;
}
.total {
  position: absolute;
  top: 25px;
  left: 300px;
}

::v-deep .el-form-item.is-error {
  .el-input__inner {
    border-color: #f56c6c !important;
  }
}
.botton {
  background-color: #0091b7;
}
.select-box-content-name {
  width: 120px;
  text-align: right;
}
.pointer {
  cursor: pointer;
}
</style>
